<div id="uploadTipDiv" class="upload-tip">
    <img id="tipimg" class="upload-tip-img" src="static/pic/app/photo.png" />
    <p class="upload-tip-text">可上传商家现场照片、服务场景、宣传资料等</p>
</div>
<div id="uploadBarDiv" class="upload-bar" style="display: none;">
    <div id="addimgdiv" class="upload-btn">
        <img id="addimg" src="static/pic/app/addimg.png" class="upload-btn-img" />
    </div>
</div>
<input type="text" id="isshowtip" class="display-none" value="1" />
<input type="text" id="coverPicId" class="display-none" />

<script type="text/javascript">
	function insertUploadImg(newObj, filename) {
	    var parentObj = getItem('uploadBarDiv');
	    var uploadObj = getItem('addimgdiv');
	    parentObj.insertBefore(newObj, uploadObj);
	    fileNum++;

	    if (fileNum >= 6) {
	        uploadObj.style.display = 'none';
	    }

	    if (getValue('isshowtip') == '1') {
	        var classObj = document.querySelector('.moxie-shim-html5');
	        classObj.parentNode.removeChild(classObj);

	        setDisplay('uploadBarDiv', '');
	        setDisplay('uploadTipDiv', 'none');
	        setValue('isshowtip', '0');
	        setUploadBtn('addimg');
	    }

	    var classObj = document.querySelector('.moxie-shim-html5');
	    if (classObj != null)
	        classObj.style.display = 'none';
	}

	function deleteNewPic(obj, filename) {
		//判断删除的是否为封面图
		var childrenList = obj.parentNode.children;
		for (var i = 0; i < childrenList.length; i++) {
			if (childrenList[i].className == 'upload-cover-btn-selected') {
				setValue('coverPicId', '');
				break;
			}
		}

	    delete fileList[filename];
	    obj.parentNode.parentNode.removeChild(obj.parentNode);
	    fileNum--;

	    if (fileNum < 6) {
	        setDisplay('addimgdiv', '')
	    }
	}

	function previewImage(file, callback) {
	    if (!file || !/image\//.test(file.type)) {
	        return;
	    }
	    if (file.type == 'image/gif') {
	        var fr = new moxie.file.FileReader();
	        fr.onload = function () {
	            callback(fr.result);
	            fr.destroy();
	            fr = null;
	        }
	        fr.readAsDataURL(file.getSource());
	    }
	    else {
	        var preloader = new moxie.image.Image();
	        preloader.onload = function () {
	            var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL();
	            callback && callback(imgsrc);
	            preloader.destroy();
	            preloader = null;
	        };
	        preloader.load(file.getSource());
	    }
	}

	function setCoverPic(obj, uuid) {
		if (obj.className == 'upload-cover-btn-selected') {
			obj.className = 'upload-cover-btn';
			setValue('coverPicId', '');
		}
		else {
			var elements = document.querySelectorAll('.upload-cover-btn-selected');
			if (elements != null && elements.length > 0) {
				for (var i = 0; i < elements.length; i++) {
					elements[i].className = 'upload-cover-btn';
				}
			}

			obj.className = 'upload-cover-btn-selected';
			setValue('coverPicId', uuid);
		}
	}

	var fileList = {};
	var fileNum = 0;
	function setUploadBtn(uploadBtnId) {
	    var uploader_img = new plupload.Uploader({
	        runtimes: 'html5,flash,silverlight,html4',
	        browse_button: uploadBtnId,
	        container: getItem('uploadBarDiv'),
	        flash_swf_url: 'static/js/plupload/Moxie.swf',
	        silverlight_xap_url: 'static/js/plupload/Moxie.xap',
	        multi_selection: true,
	        chunk_size: '0',
	        prevent_duplicates: false,
	        multipart: true,
	        max_retries: 0,
	        resize: {
	            crop: false,
	            quality: 90,
	            preserve_headers: true
	        },
	        filters: {
	            max_file_size: '5mb',
	            prevent_duplicates: true,
	            mime_types: [
	                {
	                    title: '图片文件',
	                    extensions: 'jpg,jpeg,png'
	                },
	            ]
	        },
	        init: {
	            FilesAdded: function (up, files) {
	                if (up.files.length >= 1) {
	                    up.splice(0, up.files.length - 1);
	                    for (var i = up.files.length - 1; i > 0; i--) {
	                        if (i != up.files.length - 1) {
	                            up.removeFile(up.getFile(file[i].id));
	                        }
	                    }
	                }

	                plupload.each(files, function (file) {
	                    previewImage(file, function(imgSrc) {
	                        if (file.size / 1024 > 2048) {
	                            openTip('图片不能超过2M');
	                            return;
	                        }

	                        var uuid = getUUID();
	                        fileList[uuid] = encodeURIComponent(imgSrc);

	                        var newObj = document.createElement('div')
	                        newObj.className = 'upload-img';
	                        newObj.style.backgroundImage = 'url(\'' + imgSrc + '\')';
	                        newObj.innerHTML = '<img src="static/pic/app/delete.png" class="upload-btn2" onclick="deleteNewPic(this, \'' + uuid + '\')" /><div class="upload-cover-btn" onclick="setCoverPic(this, \'' + uuid + '\')">封面</div>';
	                        insertUploadImg(newObj, uuid);
	                    });
	                });
	            }
	        }
	    });
	    uploader_img.init();
	}
	setUploadBtn('tipimg');
</script>

<style type="text/css">
	.upload-tip
	{
	    padding: 100px 0 50px 0;
	    background-color: #F2F2F2;
	    text-align: center;
	}

	.upload-tip-img
	{
	    width: 136px;
	}

	.upload-tip-text
	{
	    color: #A1A1A1;
	    font-size: 26px;
	    text-align: center;
	    margin-top: 10px;
	}

	.upload-bar
	{
	    padding: 28px 0 0 0;
	    background-color: white;
	    font-size: 0;
	}

	.upload-img
	{
	    width: 200px;
	    height: 200px;
	    background-size: cover;
	    background-position: center;
	    display: inline-block;
	    margin-left: 30px;
	    margin-bottom: 28px;
	}

	.upload-btn
	{
	    width: 198px;
	    height: 198px;
	    border: 1px solid #D7D7D7;
	    display: inline-block;
	    margin-left: 30px;
	    margin-bottom: 28px;
	    -webkit-border-radius: 10px;
	}

	.upload-btn-img
	{
	    width: 130px;
	    height: 130px;
	    margin-top: 35px;
	    margin-left: 35px;
	    float: left;
	}

	.upload-btn2
	{
	    width: 50px;
	    height: 50px;
	    float: right;
	}

	.upload-cover-btn, .upload-cover-btn-selected
	{
		width: 80px;
	    height: 40px;
	    line-height: 40px;
	    color: #333333;
	    font-size: 24px;
	    text-align: center;
	    background-color: #F2F2F2;
	    margin-top: 160px;
	    float: left;
	}

	.upload-cover-btn-selected
	{
		color: white;
		background-color: #21A0F7;
	}
</style>